<script setup lang="ts">
import Vditor from "vditor";
import "vditor/dist/index.css";
import { ref, onMounted } from "vue";

const vditor = ref<Vditor | null>(null);
const vditorContent = ref<string>(`# 时间都睡觉哦对

送到建瓯市京东  道教佛教欧迪芬

代开发票快递赔付`);

onMounted(() => {
  vditor.value = new Vditor("vditor", {
    value: vditorContent.value,
    placeholder: "请输入内容",
    counter: {
      enable: true,
      type: "markdown",
    },
    cache: {
      enable: false,
    },
    blur: (value: string) => {
      vditorContent.value = value;
    },
    outline: {
      enable: true,
      position: "right",
    },
    height: "50vh",
    width: "50vw",
  });
});
</script>

<template>
  <div id="main">
    <div id="vditor"></div>
    <div>{{ vditorContent }}</div>
    <textarea v-model="vditorContent">大大大大顶顶顶顶顶顶</textarea>
    <n-button>按钮</n-button>
  </div>
</template>
